<!--
 * @Author: zheng yong tao
 * @Date: 2022-01-15 16:38:57
 * @LastEditors: zheng yong tao
 * @LastEditTime: 2022-03-06 14:07:51
 * @Description: 
-->
<template>
  <div>
    <div class="type-list">
      <el-tabs
        v-model="activeName"
        type="border-card"
        addable="true"
        @tab-click="handleTabClick"
        @tab-add="addTab"
      >
        <el-tab-pane
          v-for="(item, index) in typeList"
          :key="'type-' + index"
          :label="item.name"
          :name="item.id"
        >
          <article-list
            :allArticles="allArticles"
            @refreshData="initData"
            ref="columnList"
          ></article-list>
        </el-tab-pane>
      </el-tabs>
      <el-dialog
        title="添加新栏目"
        ref="newTypeDialog"
        :visible.sync="newTypeVisible"
        append-to-body
        width="30%"
        center
      >
        <template>
          <div class="login-panel">
            <div class="login-panel-item">
              <span>栏目名：</span>
              <el-input
                style="width: 80%;"
                placeholder="请输入栏目名"
                v-model="newType"
              ></el-input>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="newTypeVisible = false">取 消</el-button>
            <el-button type="primary" @click="doAddType()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getBlogs, getType, addType } from "@/config/api";
import articleList from "@/components/article/articleList.vue";
import { mapGetters } from "vuex";
export default {
  name: "column",
  components: {
    articleList
  },
  computed: {
    ...mapGetters(["getJBlogLogin"])
  },
  data() {
    return {
      newTypeVisible: false,
      activeName: "",
      typeList: [],
      currentType: "",
      typeMap: {},
      allTypeArticles: [],
      allArticles: [],
      newType: ""
    };
  },
  methods: {
    async doAddType() {
      let res = await this.httpPost(addType, { name: this.newType });
      if (res.code == 1) {
        this.getTypeList();
        this.newTypeVisible = false;
      } else {
        this.$message(res.msg);
      }
    },
    addTab() {
      this.newTypeVisible = true;
    },
    handleTabClick(item) {
      this.allArticles = this.allTypeArticles.filter(article => {
        return article.type_id == item.name;
      });
      this.currentType = item.label;
    },
    changeType(item) {
      this.allArticles = this.allTypeArticles.filter(article => {
        return article.type_id == item.id;
      });
      this.currentType = item.name;
    },
    async getTypeList() {
      const res = await this.httpGet(getType, {});
      if (res.code == 1) {
        this.typeList = res.data;
        this.currentType = res.data[0].name;
        this.activeName = res.data[0].id;
        this.typeList.map(item => {
          item.value = item.name;
          this.typeMap[item.id + ""] = item.name;
        });
      } else {
        this.$message(res.msg);
      }
    },
    async initData() {
      const res = await this.httpGet(getBlogs, {});
      if (res.code == 1) {
        this.allTypeArticles = res.data;
        this.changeType(this.typeList[0]);
      } else {
        this.$message(res.msg);
      }
    },
    async initPage() {
      const windowWidth = document.getElementById("app");
      if (this.appendScript || windowWidth.offsetWidth <= 900) {
        this.layout = "total, prev, pager, next";
      }
      await this.getTypeList();
      await this.initData();
    }
  },
  created() {
    this.initPage();
  },
  beforeDestroy() {}
};
</script>

<style lang="scss" scoped>
.type-list {
  margin: 1vw;
  .type-list-item {
    margin-left: 0.2rem;
    margin-top: 0.5rem;
    border: orange 1px solid;
    background-color: rgb(236, 202, 138);
    cursor: pointer;
    padding: 0.3rem 0.8rem;
    border-radius: 10%;
    &:hover {
      background-color: orange;
    }
  }
}
</style>
<style lang="scss">
.el-tabs__new-tab {
  border: 1px solid #0766d0;

  margin: 12px 10px 9px 10px;
}
.el-tabs__new-tab .el-icon-plus {
  color: #0766d0;
}
</style>
